// pages/feedback/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        value:'体验问题',
        isActive:true
      },
      {
        id:1,
        value:'商品/商家投诉',
        isActive:false
      } 
    ],
    // 被选中的图片路径 数组
    chooseImgs:[],
    // 文本域的内容
    textVal:""
  },

  // 外网的图片路径数组
  UploadImgs:[],

  // 提交按钮的点击
  handleFormSubmit(){
    // 1 获取文本域 的内容  图片数组
    const {textVal,chooseImgs} = this.data;
    // 2 合法性验证
    if(!textVal.trim()){
      // 不合法
      wx.showToast({
        title: '内容不能为空',
        icon: 'none', 
        mask: true, 
      });  
      return
    }

    // 3 准备上传图片到专门的图片服务器
    //  遍历图片数组 挨个上传
 
    // 显示正在等待的图片
    wx.showLoading({
      title: '正在上传中',
      mask: true 
    });
      

    // 判断有没有要上传的图片数组

    if(chooseImgs.length != 0){  
      chooseImgs.forEach((v,i)=>{
        wx.uploadFile({
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          filePath: v,
          // 名称 可以自定义
          name: "file",
          formData: {},
          success: (result) => {
            // console.log(result)  
            // 上传成功的代码
            //  let url = JSON.parse(result.data)
            //  this.UploadImgs.push(url)

            // 所有图片上传完毕了 才触发 
            if(i === chooseImgs.length-1){

              // 关闭弹窗
              wx.hideLoading();

              // 把 文本的内容和 图片 提交到后台

              // 最后 重置页面
              this.setData({
                textVal:"",
                chooseImgs:[]
              })

              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
                
            }
          } 
        });
      })
    }else{ 
      console.log('只是提交了文本')
        // 关闭弹窗
        wx.hideLoading();
 
        // 最后 重置页面
        this.setData({
          textVal:"" 
        })

        // 返回上一个页面
        wx.navigateBack({
          delta: 1
        });
           
    }
  },

  // 文本域的输入事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  }, 

  // 点击加号 选择图片
  handleChooseImg(){
    // 2 调用 小程序内置的 选择图片api
    wx.chooseImage({
      //选中的图片数量
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
          console.log(result)
          this.setData({
            // 图片数组 进行 拼接 
            chooseImgs: [...this.data.chooseImgs,...result.tempFilePaths]
          })
      } 
    });
      
  },

  // 标题点击 
  handleTabsItemChange(e){
    // 1 获取被点击的标题索引
    const {index} = e.detail 
    // console.log(index) 
    this.changeTitleByIndex(index)
 
  },
  // 点击自定义图片组件
  handleRemoveImg(e){ 
    // 2 获取被点击组件的索引
    const {index} = e.currentTarget.dataset;
    // console.log(index)
    // 3 获取data 中的图片数组
    let {chooseImgs} = this.data;
    // 4 删除元素
    chooseImgs.splice(index,1);
    this.setData({chooseImgs})

  },
 // 根据标题索引来激活选中的 标题数组
 changeTitleByIndex(index){
  // 2 修改源数据
  let {tabs} = this.data;
  tabs.forEach( (v,i)=>i === index ? v.isActive = true : v.isActive = false ) 
  // 3 赋值到 data 中
  this.setData({
    tabs
  }) 
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})